'use strict';{var _Cs=_Et(function*(b){let a=$("demoPanel")[0];if(!a){yield _zy("/file74.css");let d=yield _4e("/file21.js");a=_ne("demoPanel")[0];$("[demoName]",a).each((c,e)=>{$(e).append(`<t>${d[$(e).attr("demoName")].title}</t>`)});a.openDemo=_wj(function*(c,e={}){if(!$(`demo[name=${c}]`,a)[0]){$("demo, demoPH",a).remove();let h=$("<demoPH>").attr("demoName",c).append(_ne("busySign"))[0];$("> content",a).append(h);c=yield g=>_5d(h,e,g);$("> header tit",a).html(c.title)}$(a).css("width",a.offsetWidth);
c=a.offsetLeft+a.offsetWidth/2;let f=a.offsetTop;for($(a).removeClass("menu");1E3<a.offsetHeight;)yield _Pi(0);let l=B(a,c,f);l(c,f);l(c,f);l(c,f)});$(a).appendTo("body").on("focusGained",function(){$(this).addClass("active")}).on("focusLost",function(){$(this).removeClass("active")}).css(_Sp(a,!0)).on("click","[demoName]",function(c){a.openDemo($(this).attr("demoName"),c)()}).on("click","> header btn[back]",()=>$(a).addClass("menu")).on("click","> header btn[close]",()=>$(a).remove()).on("mousedown",
"> header",c=>{const e=getComputedStyle(c.target).cursor;if("move"==e){c.preventDefault();$(document.body).css("pointer-events","none").parent().css("cursor",e);let f=B(a,c.clientX,c.clientY);$(document).on("mousemove.demoMove",l=>f(l.clientX,l.clientY)).on("mouseup.demoMove",function(){$(document.body).css("pointer-events","");$(this).off(".demoMove")})}});_I(a)}b&&($(`demoMenu [demoName=${b}]`,a)[0]||$(a).addClass("loneDemo"),_pg(!0),yield _9s(a.openDemo(b),_Pi(5E3)),_pg(!1));$(document.body).triggerEvt("mousedown");
$(a).addClass("visible active")});let B=(b,a,d)=>{let c=b.getBoundingClientRect(),e=d-b.offsetTop,f=null!=b.MVNO?b.MVNO:0,l=(a-b.offsetLeft)/c.width,h=document.body.clientWidth,g=document.body.clientHeight;if($(b).is(".menu")){a=$("> content",b)[0];var {width:m,height:n}=a.getBoundingClientRect();a=$("demoMenu",b)[0];$(a).addClass("noShrink");var {width:p,height:k}=a.getBoundingClientRect();$(a).removeClass("noShrink")}else{a=$("step img",b)[0];var {width:m,height:n}=a.getBoundingClientRect();p=a.naturalWidth;
k=a.naturalHeight}let q=p/k,r=c.width-m,z=c.height-n,C=p+r,D=k+z;return(w,u)=>{var v=Math.min(b.offsetWidth,C),t=w-v*l;u=u+f-e;let x=(w=t+v/2<h/2)?0:Math.max(0,t),y=Math.max(0,u);v=w?Math.min(h,t+v):h;t=_Qe(Math.min(v-x,((0>=u?Math.min(g,2*u+D):g)-y-z)*q+r),200,C);let A=(t-r)/q+z;x=w?Math.max(0,v-t):Math.min(x,h-t);y=Math.min(y,g-A);$(b).css({left:x,top:y,width:t,height:A});b.MVNO=0>=u?Math.max(u,(A-D)/2):0}};var _5d=(b,a={},d)=>{_zy("/file62.css")();_R("/jquery-2.2.4.min.js")(()=>{function c(h){f.autoPlay=
a.shiftKey||$(b).is("[play]");f.wrap=$(b).is("[wrap]");E(f,0,g=>{g=$(`<demo name=${e}>${g}</demo>`);$(b).is("[inline]")&&g.attr("inline","");$(b).is("[noUI]")&&g.attr("noUI","");const m=$(b).is("[load]");m&&g.attr("load","");g.attr("style",$(b).attr("style"));$(b).replaceWith(g);m||g[0].scrollIntoViewIfNeeded(!1);let n=$("> *",g).css("opacity",0).animate({opacity:1},m?1:2500);setTimeout(()=>F(n),m?1:1300);g.on("click","ctrls",function(p){if(!p.shiftKey){let q=$(this).closest("step");var k=$(p.target).closest("btn").is("[prev]");
k=q.is("[last]")&&!k?0:+q.attr("idx")+(k?-1:1);if(this==p.target&&($("[next]",this).addClass("hover"),q.is("[last]")&&!f.wrap))return;E(f,k,r=>{$(r).insertAfter(q.addClass("away")).css("opacity",0).animate({opacity:1},550,function(){q.remove();F(this)})})}}).on("click","step > content",function(p){if(p.shiftKey){let k=this.getBoundingClientRect();console.log(`${p.clientX-k.left+2|0},${p.clientY-k.top|0}`)}});h&&h()})}let e=$(b).attr("demoName"),f;const l=$(b).is("[localSrc]")||"undefined"==typeof _df?
location.href:_df;e?_4e("/file21.js?demoName="+e)(h=>{f=h[e];null==f.baseDir&&(f.baseDir=`/demos/${e}/`);f.baseDir=(new URL(f.baseDir,l)).href;c(()=>d&&d(f))}):(f={steps:eval("("+b.innerHTML+")"),baseDir:l},c())})};let F=function(b){let a=+$("[timer]",b).addClass("playing").css("--delay");a&&setTimeout(()=>$("ctrls",b)[0].click(),1E3*a)},G=b=>new Promise(a=>{let d=new Image;d.onload=()=>a(d);d.src=b}),E=function(b,a,d){var c=b.steps;if(!c)return d("<step><header>Empty Demo <cb></cb></header></step>");
let e=c[a],f=c.filter(k=>k.title),l=f.indexOf(e),h=e.title;if(!h){for(var g=a;g&&!c[--g].title;);h=c[g].title;l=f.indexOf(c[g])}g=[];let m=e.img;if(!m){for(var n=a;n&&!c[--n].img;);for(m=c[n].img;n<a;++n)g.push(...c[n].elems||[])}g.push(...e.elems||[]);m=(new URL(m,b.baseDir)).href;let p=c.length-1==a;c=[G(m)].concat(g.map(k=>{let q=k.type||Object.keys(k)[0];return H[q].apply(b,k.params||k[q])}));Promise.all(c).then(k=>{let q=k.shift(),r=e.delay||b.delay;d(`\n <step idx=${a} ${p?"last":""} ${e.bkgr?
`style="background: ${e.bkgr}"`:""}>\n <header>\n <c>Step ${l+1}/${f.length}:</c> ${h} <cb></cb>\n </header>\n <content>\n <img src="${m}">\n    <svg viewBox="0 0 ${q.width} ${q.height}">\n <defs>\n <filter id="backgr" x=0 y=0 width=1 height=1 >\n <feFlood/>\n <feComposite in="SourceGraphic"/>\n </filter>\n </defs>\n    ${k.join("")}\n </svg>\n    ${r&&b.autoPlay&&(!p||b.wrap)?`\n    <svg timer viewBox="0 0 100 100" style="--delay: ${r}"><circle /></svg>\n `:""}\n <ctrls title="Click for the next step">\n <btn prev title="Previous step">\n <svg viewBox="0 0 17.5 35"><path d="M0,10 L0,0 L10,0" transform="translate(3.5 17.5) rotate(-45)"/></svg>\n </btn>\n <btn next title="Next step">\n <svg viewBox="0 0 17.5 35"><path d="M0,10 L0,0 L10,0" transform="translate(14 17.5) rotate(135)"/></svg>\n </btn>\n </ctrls>\n </content>\n </step>\n `)})},
I=(b,a)=>Math.sqrt((b[0]-a[0])*(b[0]-a[0])+(b[1]-a[1])*(b[1]-a[1]));const H={text(b,a,d="",c=""){return`<g transform="translate(${b[0]} ${b[1]})">\n <text class="${d}" style="${c}">\n <tspan x=0>${a.trim().replace(/\s*<br([^>]*)>\s*/g,(e,f)=>`</tspan><tspan x=0 dy=${1.2+.4*(f.trim()?f:1)}em>`)}</tspan>\n </text>\n </g>`},image(b,a,d,c=""){_Mg(d)||(d=[d,d]);b=(new URL(b,this.baseDir)).href;return G(b).then(e=>{let f=d[0]||e.width;e=d[1]||e.height;return`<image xlink:href="${b}" x=${a[0]-Math.round(f/
2)} y=${a[1]-Math.round(e/2)} width=${f} height=${e} class="${c}"/>`})},rect(b,a,d,c="",e=""){_Mg(a)||(a=[a,a]);d||(d=0);_Mg(d)||(d=[d,d]);return`<rect x=${b[0]-a[0]/2} y=${b[1]-a[1]/2} width=${a[0]} height=${a[1]} rx=${d[0]} ry=${d[1]} class="${c}" style="${e}"/>`},ellipse(b,a,d="",c=""){_Mg(a)||(a=[a,a]);return`<ellipse cx=${b[0]} cy=${b[1]} rx=${a[0]} ry=${a[1]} class="${d}" style="${c}"/>`},arrow(b,a,d,c="",e=""){let f=a[0]-b[0];b=b[1]-a[1];let l=Math.sqrt(f*f+b*b);d=d||7;return`<svg arrow x="${a[0]}" y="${a[1]}" width=${2*
d} height=${l} overflow=visible>\n <g transform="rotate(${180*Math.atan2(f,b)/Math.PI})">\n <path d="M-${d},${d} L0,0 L${d},${d} M0,4 L0,${l}" class="${c}" style="${e}"/>\n </g>\n </svg>`},bentArrow(b,a,d,c,e=0,f="",l=""){var h=b[0]-a[0];let g=a[1]-b[1],m=Math.atan2(h,g),n=m-Math.atan2(a[0]-d[0],d[1]-a[1]);a=I(a,d);h=Math.sqrt(h*h+g*g);c=c||7;return`<svg arrow x="${b[0]}" y="${b[1]}" width=${2*c} height=${h} overflow=visible>\n <g transform="rotate(${180*m/Math.PI})">\n <path d="M-${c},${c} L0,0 L${c},${c} M0,4 C ${[0,
h-e]} ${[e*Math.sin(n),h+e*Math.cos(n)]} ${a*Math.sin(n)},${h+a*Math.cos(n)}" class="${f}" style="${l}"/>\n </g>\n </svg>`},path(b,a,d="",c=""){return`<path path d="M${b.map(e=>e.join(",")).join("L")+(a?"z":"")}" class="${d}" style="${c}"/>`}}};
